<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性vertical-align
		 功能：1.应用于表格中单元格【表格布局】
		      2.行内元素与行内块元素对齐格式
			  理解：文本和图片对齐方式【垂直居中】
			  元素种类：
			  行内元素：典型行内元素span、a、文本
			        特点：在一行内显示、不可以设置宽高
			  块级元素：典型块元素 div、p
			        特点：独占一行、可以设置宽高
			  行内块元素：典型行内块 img
			         特点：在一行内显示、可以设置宽高
			  页面组成：元素之间嵌套生成
			  三种元素相互嵌套 √ 嵌套根据元素特点页面混乱
			  嵌套条件1：在一行内显示【效果】
			             块套行    √   推荐
						 行套行    √
						 行套块    √  增加条件，块添加宽高,造成页面布局混乱×
						 块套块    √
						 
			  嵌套条件2：独占一行【效果】
			             块套行    √   推荐
			             行套行    ×
			             行套块    ×   混乱
			             块套块    √
		 -->
		<style>
			/* 抓每个img  
			  派生（后代）选择器：
			  特点：抓取父元素中的所有（后代）子元素【元素嵌套特点】
			  伪类选择器：
			  特点：在选择器后，过滤符合“特定条件”某个元素
			  nyh-child:选中父元素中第N个
			  符合条件：p中包含4个img
			  id抓取父元素:空间大
			  class抓取父元素中某个子元素：微调
			  
			 */
			im g:nth-child(1){
				border: 10px solid orangered;
			}
			im g:nth-child(2){
				border: 10px solid blueviolet;
			}
			
			
			
			
		/*标准抓取每个img方案*/
		p img.baseline{
			vertical-align: baseline;
		}
		p img.top{
			vertical-align: top;
		}
		p img.middle{
			vertical-align: middle;
			/*vertical-align与text-align区别
			区别1：属性值不同
			区别2：vertical-align操作文本和图片垂直
			       text-align操作文本左右和居中以及两边对齐
			*/
		}
		p img.bottom{
			vertical-align: bottom;
		}
		
		</style>
	</head>
	<body>
		
		
		<div><span>111</span></div>
	    <span>行元素
	    	<div style="border:1px solid red;height:100px ;">块元素</div>
	    </span>
		
		
		<h1>垂直方向属性的使用【针对元素种类展开】</h1>
		<p>敖光<img class="baseline" src="img/img_1.png" alt="敖光" width="200px" height="200px"/>基线对齐</p>
		<p>孙悟空<img class="top" src="img/img_2.png" alt="孙悟空"  width="200px" height="200px"/>顶部对齐</p>
		<p>哪吒<img class="middle" src="img/img_3.png" alt="哪吒"  width="200px" height="200px"/>中间对齐</p>
		<p>太乙<img class="bottom" src="img/img_4.png" alt="太乙"  width="200px" height="200px"/>底部对齐</p>
		<!--顶部对齐、中间对齐、底部对齐
		    图片宽高：25~100px-->
		<!-- 需求：垂直方法属性  4个属性值
		 如果，不改变现有html结构，可以找到依次4个img
		 抓每个---4个图片
		 思路：派生选择器+伪类选择器
		 
		 -->	
		
		
	</body>
</html>